<%--
  Created by IntelliJ IDEA.
  User: soft01
  Date: 21-10-16
  Time: 下午1:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>课程章节管理</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/back-index.css" />
    <script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-mypaginator.js"></script>
    <style type="text/css" >
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            width: 100%;
            text-align: center;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .file:focus {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>

    <script type="text/javascript" >
        $(function(){
            let titlebiaozhi=-1;
            let infobiaozhi=-1;
            let ziyuanbiaozhi=-1;
            let ziyuantitlebiaozhi=-1;
            let costNumber=-1;
            let ziyuanType=-1;
            let addOrModify="0";

            //返回课程列表
            $("#back").on('click', function(){
                $("#Mrg").text("");
                $('#frame-id', window.parent.document).attr('src', '${pageContext.request.contextPath}/course/sreachCourseByForm2.do');
            });


            //添加章节
            $("#doAddCourseReource").on('click', function(){
                $("#Mrg").text("");
                $("#addOrMoidfyButten").attr("disabled",true);
                $(".modal-title").html("添加章节");
                $("#course-resource-id-input").hide();
                $("#courseReourceModal").modal("show");
                $("label[name='Mrg']").text("");
                addOrModify="1";
                $("#course-resource-id").val("");
                $("#course-resource-title").val("");
                $("#course-resource-context").val("");
                $("#course-resource-file-title").val("");
                $("#file-cost-type").val("-1");
                $("#file-cost-type-val").val("");
                $("#resource-type-id").val("-1");
                $("#url").attr("url","${pageContext.request.contextPath}/chapter/addChapterAndResource.do");
            });
            $(".course-reource-btn").on('click', function(){
                $("#courseReourceModal").modal("hide");
            });
            //修改章节
            $(".course-reource-modify-btn").on('click', function(){
                $("#Mrg").text("");
                $(".modal-title").html("修改章节");
                $("#course-resource-id-input").show();
                $("#courseReourceModal").modal("show");
                titlebiaozhi=1;
                infobiaozhi=1;
                ziyuanbiaozhi=1;
                ziyuantitlebiaozhi=1;
                costNumber=1;
                ziyuanType=1;
                addOrModify="2";
                $("label[name='Mrg']").text("");
                $("#url").attr("url","${pageContext.request.contextPath}/chapter/modifyChapterAndResource.do");

            });



            // 显示隐藏查询列表
            $('#show-course-resource-search').click(function() {
                $("#Mrg").text("");
                $('#show-course-resource-search').hide();
                $('#upp-course-resource-search').show();
                $('.show-course-resource-search').slideDown(500);
            });
            $('#upp-course-resource-search').click(function() {
                $('#show-course-resource-search').show();
                $('#upp-course-resource-search').hide();
                $('.show-course-resource-search').slideUp(500);
            });
            $("#doSearch").click(function () {
                $("#Mrg").text("");
                $("#searchForm").submit();
            })
            $("input[name='yong']").click(function () {
                let chapterId=$(this).attr("chapterId");
                let status=$(this).attr("status");
                $.ajax({
                    type:"post",
                    url:"${pageContext.request.contextPath}/chapter/yongChapterById.do",
                    data:{
                        "chapterId":chapterId,
                        "status":status,
                    },
                    dataType:"json",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            console.log("成功了");
                            $("#Mrg").text("");
                            location.href="${pageContext.request.contextPath}/chapter/findChapterByForm2.do?pageNo="+
                                    "${sessionScope.chapterList.pageNum==0?1:sessionScope.chapterList.pageNum}"
                        }else {
                            console.log("失败了");
                            $("#Mrg").text(result.message);
                        }
                    }
                })
            })
            $("#course-resource-title").keyup(function () {//检查标题
                let This=$(this);
                let title=This.val();
                let chapterId=$("#course-resource-id").val();
                console.log(chapterId)
                $.ajax({
                    type:"post",
                    data:{"title":title,
                    "chapterId":chapterId},
                    url:"${pageContext.request.contextPath}/chapter/jianchaTitle.do",
                    dataType:"json",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            titlebiaozhi=1;
                            $("label[name='Mrg']",This.parent().parent()).text("");
                            // $("#addOrMoidfyButten").attr("disabled",false);
                        }else{
                            $("label[name='Mrg']",This.parent().parent()).text(result.message);
                            $("#addOrMoidfyButten").attr("disabled",true);
                        }
                    }
                })
            })
            $("#course-resource-context").keyup(function () {//检查简介
                let This=$(this);
                let info=This.val();
                $.ajax({
                    type:"post",
                    data:{"info":info},
                    url:"${pageContext.request.contextPath}/chapter/jianchaInfo.do",
                    dataType:"json",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            infobiaozhi=1;
                            $("label[name='Mrg']",This.parent().parent()).text("");
                        }else{
                            $("label[name='Mrg']",This.parent().parent()).text(result.message);
                            $("#addOrMoidfyButten").attr("disabled",true);
                        }
                    }
                })
            })

            $("#course-resource-file-title").keyup(function () {//检查文件标题
                let This=$(this);
                let zhiyuantitle=This.val();
                $.ajax({
                    type:"post",
                    data:{"zhiyuantitle":zhiyuantitle},
                    url:"${pageContext.request.contextPath}/chapter/jianchaZhiyuantitle.do",
                    dataType:"json",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            ziyuantitlebiaozhi=1;
                            $("label[name='Mrg']",This.parent().parent()).text("");
                        }else{
                            $("label[name='Mrg']",This.parent().parent()).text(result.message);
                            $("#addOrMoidfyButten").attr("disabled",true);
                        }
                    }
                })
            })
            $("input[name=xiangqing]").click(function () {//去资源展示
                let id = $(this).attr("chapterId");
                console.log(id);
                $.ajax({
                    type:"post",
                    data:{"chapterId":id},
                    url:"${pageContext.request.contextPath}/resource/findMp4ByChapterId.do?chapterId="+id+"&backbiaozhi=1",
                    dataType:"json",
                    success:function (result) {
                        console.log(result);
                        if(result.responseCode=="2001"){
                            console.log("mp4");
                            location.href="${pageContext.request.contextPath}/showMp4.do"
                        }else if (result.responseCode=="2005"){
                            console.log("pdf");
                            location.href="${pageContext.request.contextPath}/resource/uploadPDF.do?chapterId="+id;
                        } else{
                            $("#Mrg").text(result.message);
                        }
                    }
                })
            })
            $("#file-cost-type-val").keyup(function () {//检查花费值
                let This=$(this);
                let costNum=This.val();
                $.ajax({
                    type:"post",
                    data:{"costNum":costNum},
                    url:"${pageContext.request.contextPath}/chapter/jianchaCostNum.do",
                    dataType:"json",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            costNumber=1;
                            $("label[name='Mrg']",This.parent().parent()).text("");
                        }else{
                            $("label[name='Mrg']",This.parent().parent()).text(result.message);
                            $("#addOrMoidfyButten").attr("disabled",true);
                        }
                    }
                })
            })
            $("#course-resource-file").change(function () {//检查资源
                let This=$(this);
                let form = new FormData($("#addOrModifyForm")[0])
                $.ajax({
                    type:"post",
                    data:form,
                    url:"${pageContext.request.contextPath}/chapter/jianchaResource.do",
                    dataType:"json",
                    processData:false,
                    contentType:false,
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            ziyuanType=1;
                            ziyuanbiaozhi=1;
                            $("label[name='Mrg']",This.parent().parent()).text("");
                            $("label[name='Mrg']",$("#resource-type-id").parent().parent()).text("");
                        }else{
                            $("label[name='Mrg']",This.parent().parent()).text(result.message);
                            $("label[name='Mrg']",$("#resource-type-id").parent().parent()).text(result.message);
                            $("#addOrMoidfyButten").attr("disabled",true);
                        }
                    }
                })
            })
            $("#resource-type-id").change(function () {//检查资源数据格式
                let This=$(this);
                let form = new FormData($("#addOrModifyForm")[0]);
                $.ajax({
                    type:"post",
                    data:form,
                    url:"${pageContext.request.contextPath}/chapter/jianchaResource.do",
                    dataType:"json",
                    processData:false,
                    contentType:false,
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            ziyuanType=1;
                            ziyuanbiaozhi=1;
                            $("label[name='Mrg']",This.parent().parent()).text("");
                            $("label[name='Mrg']",$("#course-resource-file").parent().parent()).text("");
                        }else{
                            $("label[name='Mrg']",This.parent().parent()).text(result.message);
                            $("label[name='Mrg']",$("#course-resource-file").parent().parent()).text(result.message);
                            $("#addOrMoidfyButten").attr("disabled",true);
                        }
                    }
                })
            })

            $("#file-cost-type").change(function () {//检查花费类型
                let This=$(this);
                if(This.val()=="-1"){
                    $("label[name='Mrg']",This.parent().parent()).text("请选择花费类型");
                }else{
                    $("label[name='Mrg']",This.parent().parent()).text("");

                }
            })
            $("#courseReourceModal").mousemove(function () {

                if($("#resource-type-id").val()!="-1"
                    && $("#file-cost-type").val()!="-1"
                    && titlebiaozhi==1
                    && infobiaozhi==1
                    && ziyuanbiaozhi==1
                    && ziyuantitlebiaozhi==1
                    && costNumber ==1
                    && ziyuanType ==1){
                    $("#addOrMoidfyButten").attr("disabled",false);
                }
            })
            $("#addOrMoidfyButten").click(function () {//添加或者修改
                console.log("提交按钮");
                let This=$(this);
                let form = new FormData($("#addOrModifyForm")[0]);
                let url=$("#url").attr("url");
                let id=$("#courseId").attr("courseId");
                console.log(id);
                $.ajax({
                    type:"post",
                    url:url,
                    data:form,
                    dataType:"json",
                    processData:false,
                    contentType:false,
                    success:function (result)  {
                        console.log("修改或者添加成功了");
                        console.log(result);
                        console.log(addOrModify);
                        if(result.responseCode=="2001"){
                            if(addOrModify=="1"){
                                $("#Mrg").text("");
                                console.log("成功");
                                console.log(addOrModify);
                                location.href="${pageContext.request.contextPath}/chapter/findAllChapterByCourseId.do?courseId="+id;
                            }
                            if(addOrModify=="2"){
                                $("#Mrg").text("");
                                console.log("修改");
                                location.href="${pageContext.request.contextPath}/chapter/findChapterByForm2.do?pageNo="+
                                    "${sessionScope.chapterList.pageNum==0?1:sessionScope.chapterList.pageNum}"
                            }
                        }else {
                            $("#Mrg").text(result.message);
                        }
                    }
                })
            })
            $("input[name=xiugai]").click(function () {//修改前查询默认值
                let This = $(this);
                let chapterId =This.attr("chapterId");
                console.log(123)
                $.ajax({
                    type:"get",
                    url:"${pageContext.request.contextPath}/chapter/findChapterAndResourceBychapterId.do?chapterId="+chapterId,
                    dataType:"json",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            $("#course-resource-id").val(result.returnObject.id);
                            $("#course-resource-title").val(result.returnObject.title);
                            $("#course-resource-context").val(result.returnObject.info);
                            $("#course-resource-file-title").val(result.returnObject.resource.title);
                            $("#file-cost-type").val(result.returnObject.resource.costType);
                            $("#file-cost-type-val").val(result.returnObject.resource.costNumber);
                            if(result.returnObject.resource.fileType==".pdf"){
                                $("#resource-type-id").val("2");
                            }
                            if(result.returnObject.resource.fileType==".mp4"){
                                $("#resource-type-id").val("1");
                            }
                        }else {
                            $("#Mrg").text(result.message);
                        }
                    }
                })

            })
            $("input[name=comment]").click(function () {
                let chapter=$(this).attr("chapterId");
                $.ajax({
                    type:"post",
                    data:{"chapterId":chapter},
                    dataType:"json",
                    url:"${pageContext.request.contextPath}/comment/findCommentByChapterId.do",
                    success:function (result) {
                        if(result.responseCode=="2001"){
                            $("#Mrg").text("");
                            location.href="${pageContext.request.contextPath}/showComment.do"
                        }else {
                            $("#Mrg").text(result.message);
                        }
                    }
                })
            })

            //按钮的超链接设置函数
                 myoptions.pageUrl = function(type, page, current) {
                     let courseId=$("#courseId").attr("courseId");
                    return "${pageContext.request.contextPath }/chapter/findChapterByForm2.do?pageNo="
                              + page;
                 };
            //分页回调函数,点击按钮事件
            myoptions.onPageClicked = function(event, originalEvent, type, page) {
                //ajax回调接收数据成功时再重新初始化分页按钮
                console.log("pageNo=", page);
            };
            //分页,在bootstrap-mypaginator.js中
            myPaginatorFun("myPages",
                "${sessionScope.chapterList.pageNum==0?1:sessionScope.chapterList.pageNum}",
                "${sessionScope.chapterList.pages==0?1:sessionScope.chapterList.pages}");

        });
        function fileUpload(item){
            $(item).click();
        }
        function fileChange(item){
            var file = item.files[0];//获取选中的第一个文件
            $(".file").html(file.name);
            //console.log("file", file.name);
        }

    </script>
</head>

<body>
<div class="panel panel-default" id="userSet">
    <div class="panel-heading">
        <h3 class="panel-title">课程章节管理</h3><span id="url" url=""></span>
    </div>
    <div>
        <input type="button" value="添加章节" class="btn btn-primary" id="doAddCourseReource" style="margin: 5px 5px 5px 15px;" />
        <input type="button" value="查询" class="btn btn-success" id="doSearch" style="margin: 5px 5px 5px 0px;" />
        <input type="button" class="btn btn-primary" id="show-course-resource-search" value="展开搜索" />
        <input type="button" value="收起搜索" class="btn btn-primary" id="upp-course-resource-search" style="display: none;" />
        <input type="button" value="返回课程列表" class="btn btn-success" id="back" style="margin: 5px 15px 5px 0px;float: right;" />
    </div>
    <div class="panel-body">
        <div class="show-course-resource-search" style="display: none;">
            <form class="form-horizontal" id="searchForm" method="post" action="${pageContext.request.contextPath}/chapter/findChapterByForm.do">
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="course-resource-title-search" class="col-xs-3 control-label">标题：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="chapterName" id="course-resource-title-search" placeholder="请输入标题" />
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label for="course-resource-info-search"  class="col-xs-3 control-label">简介：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="chapterInfo" id="course-resource-info-search" placeholder="请输入简介" />
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">开始日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="kaishitime" placeholder="请输入开始时间:2017-10-10" />
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">结束日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="jieshutime" placeholder="请输入结束时间:2017-10-12" />
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="course-resource-stauts-search" class="col-xs-3 control-label">状态：</label>
                        <div class="col-xs-8">
                            <select class="form-control" id="course-resource-stauts-search" name="course-resource-stauts-search" >
                                <option value="0" >全部</option>
                                <option value="1" >启用</option>
                                <option value="-1" >禁用</option>
                            </select>
                        </div>
                    </div>
                </div>

            </form>
        </div>

        <div class="show-list">
            <table class="table table-bordered table-hover" style='text-align: center;' >
                <span id="NULL" style="color: red">${sessionScope.NULL}</span>
                <span id="Mrg" style="color: red"></span>
                <thead>
                <tr class="text-danger">
                    <th class="text-center">编号</th>
                    <th class="text-center">标题</th>
                    <th class="text-center">简介</th>
                    <th class="text-center">创建时间</th>
                    <th class="text-center">状态</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody id="tb">
                <span id="courseId" courseId="${sessionScope.courseId}"></span>
                <c:forEach items="${sessionScope.chapterList.list}" var="chapter" varStatus="i">
                    <tr>
                        <td>${i.index+1}</td>
                        <td>${chapter.title}</td>
                        <td>${chapter.info}</td>
                        <td><fmt:formatDate value="${chapter.createDate}" pattern="yyyy-MM-dd hh:mm:ss"/></td>
                        <c:choose>
                            <c:when test="${chapter.status==1}">
                                <td>启用</td>
                                <td class="text-center">
                                    <input type="button" class="btn btn-warning btn-sm course-reource-modify-btn" name="xiugai" chapterId="${chapter.id}" value="修改">
                                    <input type="button" class="btn btn-danger btn-sm" name="yong" status="-1" chapterId="${chapter.id}" value="禁用">
                                    <input type="button" class="btn btn-success btn-sm resource-detail" name="xiangqing" chapterId="${chapter.id}"  value="详情" />
                                    <input type="button" class="btn btn-success btn-sm comment-detail" name="comment" chapterId="${chapter.id}" value="相关评论" />
                                </td>
                            </c:when>
                            <c:when test="${chapter.status==-1}">
                                <td>禁用</td>
                                <td class="text-center">
                                    <input type="button" class="btn btn-warning btn-sm course-reource-modify-btn" name="xiugai" chapterId="${chapter.id}" value="修改">
                                    <input type="button" class="btn btn-success btn-sm" name="yong" status="1" chapterId="${chapter.id}" value="启用">
                                    <input type="button" class="btn btn-success btn-sm resource-detail" name="xiangqing" chapterId="${chapter.id}" value="详情" />
                                    <input type="button" class="btn btn-success btn-sm comment-detail" name="comment" chapterId="${chapter.id}" value="相关评论" />
                                </td>
                            </c:when>
                        </c:choose>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div style="text-align: center;" >
            <ul id="myPages" ></ul>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" id="courseReourceModal" >
    <!-- 窗口声明 -->
    <div class="modal-dialog modal-lg">
        <!-- 内容声明 -->
        <div class="modal-content">
            <!-- 头部、主体、脚注 -->
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" >添加章节</h4>
            </div>
            <form id="addOrModifyForm" method="post" enctype="multipart/form-data">
            <div class="modal-body text-center">
                <!-- course-id,没有时,移除 '返回课程列表' 按钮 -->
                <input type="hidden" name="course_id" value=""  />
                <div class="row text-right" id="course-resource-id-input" >
                    <label for="course-resource-id" class="col-xs-4 control-label">章节编号：</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" name="chapterId" id="course-resource-id" readonly="true" />
                    </div>
                </div>
                <br>
                <div class="row text-right">
                    <label for="course-resource-title" class="col-xs-4 control-label">章节标题：</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" name="title" id="course-resource-title" />
                    </div>
                    <label style="color: red" name="Mrg" class="col-xs-4 control-label"></label>
                </div>
                <br>
                <div class="row text-right">
                    <label for="course-resource-context" class="col-xs-4 control-label">内容详情：</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" name="info" id="course-resource-context" />
                    </div>
                    <label style="color: red" name="Mrg" class="col-xs-4 control-label"></label>
                </div>
                <br>
                <p/>
                <div class="row text-right">
                    <label class="col-xs-4 control-label">资源：</label>
                    <div class="col-xs-4">
                        <a href="javascript:fileUpload('#course-resource-file');" class="file" >选择文件</a>
                        <input type="file" name="course_resource_file" style="display: none;" onchange="fileChange(this)" id="course-resource-file" />
                    </div>
                    <label style="color: red" name="Mrg" class="col-xs-4 control-label"></label>
                </div>
                <br/>
                <div class="row text-right">
                    <label for="course-resource-file-title" class="col-xs-4 control-label">资源标题：</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" name="resourceTitle" id="course-resource-file-title" />
                    </div>
                    <label style="color: red" name="Mrg" class="col-xs-4 control-label"></label>
                </div>
                <br>
                <div class="row text-right">
                    <label for="file-cost-type" class="col-xs-4 control-label">查看资源花费类型：</label>
                    <div class="col-xs-4">
                        <select class="form-control" id="file-cost-type" name="file_cost_type_id" >
                            <option value="-1" >请选择</option>
                            <option value="0" >积分</option>
                            <option value="1" >金币</option>
                        </select>
                    </div>
                    <label style="color: red" name="Mrg" class="col-xs-4 control-label"></label>
                </div>
                <br>
                <div class="row text-right">
                    <label for="file-cost-type-val" class="col-xs-4 control-label">花费值：</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" name="costNum" id="file-cost-type-val" />
                    </div>
                    <label style="color: red" name="Mrg" class="col-xs-4 control-label"></label>
                </div>
                <br>
                <div class="row text-right">
                    <label for="resource-type-id" class="col-xs-4 control-label">资源类型：</label>
                    <div class="col-xs-4">
                        <select class="form-control" id="resource-type-id" name="resource_type_id" >
                            <option value="-1" >请选择</option>
                            <option value="1" >mp4</option>
                            <option value="2" >pdf</option>
                        </select>
                    </div>
                    <label style="color: red" name="Mrg" class="col-xs-4 control-label"></label>
                </div>
                <br>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary course-reource-btn" type="button" id="addOrMoidfyButten">确定</button>
                <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
            </div>
            </form>
        </div>
    </div>
</div>
</body>

</html>
